import "../sass/detail.scss"

const box = document.querySelector('.box')


const id = window.localStorage.getItem('id')
const goodsId = window.sessionStorage.getItem('goodsId')
const token = window.localStorage.getItem('token')
const cart_info = document.querySelector('.cart_info')
const goods_number = document.querySelector('.goods_number')
const paramsBox = document.querySelector('.params')
!goodsId ? window.location.href = 'list.html' : getGoodsInfo()



/************* 获取商品信息 ************/
async function getGoodsInfo() {

   await $.ajax({
        url: 'http://localhost:8888/goods/item?id=' + goodsId,
    }).then( res => {
        console.log(res)
          // 判断查询的商品不存在
          if (res.code === 2) {
            window.location.href = './list.html'
            return
        }
        // 2-3. 渲染页面
         box.innerHTML = `
         <div class="left" id="fangdajing">
        <div class="left_top">
            <img src="${res.info.img_big_logo}" alt="" class="show_img">
            <div class="mask" data-width="100" data-height="100"></div>
        </div>
        
        <div class="left_bot">
              <div class="small_pic_1">
                    <img src="${res.info.img_big_logo}" alt="">
              </div>
              <div class="small_pic_1">
                    <img src="${res.info.img_big_logo}" alt="">
              </div>
        </div>
        <div class="enlage">
              <img src="${res.info.img_big_logo}" alt="">
        </div>
        </div>
  <div class="right">
        <p class="title">
             ${res.info.title}
         </p>
        <p class="price">
             <span class="current">￥${res.info.current_price}</span>
             <span class="old">￥${res.info.price}</span>
        </p>
        <p class="number">
              <button class="sub" data-id="${ res.info.goods_id }" data-num="${ res.info.cart_number }">-</button>
              <input type="text" value="1" class="goods_number">
              <button class="add" data-num="${ res.info.cart_number }" data-id="${ res.info.goods_id }" data-max="${ res.info.goods_number }">+</button>
         </p>
         <p class="btns">
               <button class="Detailcart">加入购物车</button>
              <button class="DetailBuy">立即购买</button>
          </p>
   </div>
           ` 
          paramsBox.innerHTML = res.info.goods_introduce
    })
   
}
/************* 获取商品信息结束 ************/





/****************** 放大镜 ********************/


const container = document.querySelector('.container')

container.addEventListener('mouseover', (e) => {
    if(e.target.className === 'left_top'){
        const mask = document.querySelector('.mask')
        const enlarge = document.querySelector('.enlage')
        mask.style.display = 'block'
        enlarge.style.display = 'block'
    }
})
container.addEventListener('mouseout', (e) => {
    if(e.target.className === 'left_top'){
        const mask = document.querySelector('.mask')
        const enlarge = document.querySelector('.enlage')
        mask.style.display = 'none'
        enlarge.style.display = 'none'
    }
})

/************* 加入购物车 ************/
function DetailaddCart(goodsId) {

    const token = window.localStorage.getItem('token')
    const id = window.localStorage.getItem('id')
    // console.log(token, id)

    if (!id) {
        const res = window.confirm('您还未登录,点击确定返回登录页,点击取消留在此页面')
        if (res) {
            window.location.href = 'login.html'
            return
        }
        return  // 点击确定到这里, 把购物车函数断掉
    }

    // 代码来到这里. 说明有 id
   $.ajax({
        url: 'http://localhost:8888/cart/add',
        type: 'POST',
        data: { id, goodsId },
        headers: { authorization: token },
    }).then(res => {
    //    console.log(res)
        if ( res.code === 401 ) {
            const info = window.confirm('登录过期,请重新登录')
    
            if (info) {
                window.location.href = 'login.html'
                return
            }
            return
        }
        if (res.code === 1) {
            alert('加入购物车成功')
        }
    })
}
/************* 加入购物车结束 ************/


/************* 加入购物车, 去支付 加 1 减1************/
box.addEventListener('click', e => {
    if(e.target.className === 'Detailcart'){
        DetailaddCart(goodsId)
    }
    if(e.target.className === 'DetailBuy'){
        const id = window.localStorage.getItem('id')
        $.ajax({
            url:'http://localhost:8888/cart/pay',
            type:'POST',
            data: { id },
            headers: { authorization: token },
            success(res){
                console.log(res)
            }
        })
    }
})
/************* 加入购物车, 去支付 结束************/


/************* 请求用户信息 *************/
function getUsersInfo(){
    $.ajax({
        url: 'http://localhost:8888/users/info?id=' + id,
        headers: { authorization: 'token' },
        success(res) {

          if(res.code === 401){
                cart_info.innerText = '请登录'
        }
          if(res.code === 1)
          cart_info.innerText = res.info.nickname
        }
    })
}
  getUsersInfo()



